<template lang="html">
    <div
      class="x-bar"
      :id="chartId"
      :option='option'
      >
      </div>
</template>

<script>
export default {
  props : {
    chartId : {
      type : String,
    },
    title : {
      type : String,
    },
    options : {
      type : Object,
    }
  },
  data(){
    return {
      chart : '',
      option : {
          tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          legend: {
               data:['市内','市外','总量'],
               top:'22px',
               textStyle : {
                 color : '#fafafa',
               },
               itemGap : 30,
               itemWidth : 20,
               itemHeight : 8,
           },
          grid: {
              top : '31%',
              left: '6%',
              right: '4%',
              bottom: '6%',
              containLabel: true
          },
          xAxis : [
              {
                  type : 'category',
                  data : this.options.date,
                  // data : (function (){
                  //           var _time = new Date()
                  //           var now = new Date(_time - 86400000);
                  //           var res = [];
                  //           var len = 7;
                  //           while (len--) {
                  //               res.unshift(now.toLocaleString());
                  //               now = new Date(now - 86400000);
                  //           }
                  //           return res;
                  //       })(),
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: '#fff',
                          fontSize : '12'
                      },
                  },
                  axisLine : {
                    show : true,
                    lineStyle : {
                      color : '#0678c6'
                    },
                  },
                  axisTick : {
                    show:false,
                    alignWithLabel: true
                  }
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  name : '(人次/万)',
                  minInterval : 50,
                  nameTextStyle : {
                    color : '#fff',
                    fontSize : 10,
                    padding : [0,0,0,-30]
                  },
                  axisLine : {
                    show : true,
                    lineStyle : {
                      color : '#0678c6'
                    },
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize : '12'
                    },
                    formatter : function(value){
                      return value / 10000
                    }
                  },
                  axisTick : {
                    show:false,
                  },
                  splitLine : {
                    show : true,
                    lineStyle : {
                      color : 'rgba(166,166,166,.4)'
                    }
                  }
              }
          ],
          series : [
              {
                  name:'总量',
                  type:'bar',
                  barWidth: '24px',
                  color : '#00afa9',
                  data:this.options.allData//传入数据
              },
              {
                  name:'市内',
                  color : 'rgb(255, 180, 31)',
                  data: this.options.insideData,//传入数据
                  type: 'line',
                  emphasis : {
                    itemStyle : {
                      color: '#fff',
                      borderColor : 'rgb(255, 180, 31)',
                      borderWidth : 3,
                    },
                  },
                  areaStyle: {normal: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0.3, 0, 1, [{
                            offset: 0,
                            color: 'rgb(4, 198, 235)'
                        }, {
                            offset: 1,
                            color: 'rgba(4, 198, 235,.0)'
                        }])
                    }},
              },
              {
                  name:'市外',
                  color : '#6a5bff',
                  data: this.options.outsideData,//传入数据
                  type: 'line',
                  emphasis : {
                    itemStyle : {
                      color: '#fff',
                      borderColor : '#6a5bff',
                      borderWidth : 3,
                    },
                  },
                  areaStyle: {normal: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0.3, 0, 1, [{
                            offset: 0,
                            color: 'rgb(40, 119, 217)'
                        }, {
                            offset: 1,
                            color: 'rgba(40, 119, 217,.0)'
                        }])
                    }},
              }
          ]
      }
    }
  },
  watch : {
    options: {
     handler(newVal, oldVal) {
      if (this.chart) {
       if (newVal) {
         this.option.xAxis[0].data = newVal.date;
         this.option.series[0].data = newVal.allData;
         this.option.series[1].data = newVal.insideData;
         this.option.series[2].data = newVal.outsideData;
        this.chart.setOption(this.option);
       } else {
        this.chart.setOption(this.option);
       }
      } else {
        this.init();
      }
     },
     deep: true
  }
  },
  methods : {
    init() {
     this.chart = this.$echarts.init(document.getElementById(this.chartId));
     this.chart.setOption(this.option);
     window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted(){
    this.init();
  }
}
</script>

<style lang="scss" scoped>
  .x-bar {
    width: 100%;
    height: 100%;
  }
</style>
